<template>
	<view class="container">
		<!-- 顶部媒体 - 图片或视频 -->
		<view v-if="activityDetail.activityType === '1'" class="animated-item" style="animation-delay: 0.1s">
			<u-image :src="baseUrl+activityDetail.coverImage" width="100%" height="250px" mode="aspectFill"></u-image>
		</view>
		<view v-else class="animated-item" style="animation-delay: 0.1s">
			<video :src="activityDetail.videoUrl" controls style="width: 100%; height: 250px;"></video>
		</view>

		<!-- 活动标题和基本信息 -->
		<view class="activity-header animated-item" style="animation-delay: 0.2s">
			<view class="title-section">
				<view class="title-row">
					<u-text :text="activityDetail.title" size="18" bold></u-text>
					<uni-tag :text="getActivityTypeLabel(activityDetail.activityType)"
						:type="getActivityTypeTag(activityDetail.activityType)" custom-style="margin-left: 8px;" />
				</view>
				<u-text :text="formatDateRange(activityDetail.startDate, activityDetail.endDate)" size="14"
					color="#606266" custom-style="margin-top: 8px;"></u-text>
			</view>
		</view>

		<!-- 活动地点（如果是线下或混合） -->
		<view v-if="activityDetail.location" class="info-section animated-item" style="animation-delay: 0.3s">
			<u-icon name="map" size="16" color="#409EFF"></u-icon>
			<u-text :text="activityDetail.location" size="14" color="#606266" custom-style="margin-left: 8px;"></u-text>
		</view>

		<!-- 创建者信息 -->
		<view class="creator-section animated-item" style="animation-delay: 0.4s">
			<view class="creator-info-left">
				<view class="creator-meta">
					<u-text :text="activityDetail.createBy" size="14" bold></u-text>
					<u-text :text="formatDateTime(activityDetail.createTime)" size="12" color="#909399"></u-text>
				</view>
			</view>
		</view>

		<!-- 活动详情内容 -->
		<view class="content-section animated-item" style="animation-delay: 0.5s">
			<u-text :text="activityDetail.description || '暂无详细内容'" size="14" color="#606266"></u-text>
		</view>
	</view>
</template>

<script>
	import {getStudyactivity} from '@/api/coursestudy/studyactivity.js'
	import config from '../../config';
	export default {
		data() {
			return {
				baseUrl:config.baseUrl,
				activityId: null,
				activityDetail: {}
			}
		},
		onLoad(options) {
			this.activityId = options.activityId;
			this.loadActivityDetail(this.activityId);
		},
		methods: {
			async loadActivityDetail(activityId) {
				const res = await getStudyactivity(activityId)
				if (res) {
					this.activityDetail = res.data;
				} else {
					uni.showToast({
						title: '课程不存在',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			},
			formatDateRange(start, end) {
				const startDate = new Date(start);
				const endDate = new Date(end);

				if (start === end) {
					return `${startDate.getFullYear()}年${startDate.getMonth()+1}月${startDate.getDate()}日`;
				} else {
					return `${startDate.getFullYear()}年${startDate.getMonth()+1}月${startDate.getDate()}日-${endDate.getMonth()+1}月${endDate.getDate()}日`;
				}
			},
			formatDateTime(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			},
			getActivityTypeLabel(type) {
				const types = {
					'0': '线上',
					'1': '线下',
					'2': '线上+线下'
				};
				return types[type] || '';
			},
			getActivityTypeTag(type) {
				const tags = {
					'0': 'primary',
					'1': 'success',
					'2': 'warning'
				};
				return tags[type] || 'default';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 20px;
		background-color: #fff;
		min-height: 100vh;
	}

	.activity-header {
		padding: 15px;
		border-bottom: 1px solid #ebeef5;
		.title-section {
			.title-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}

	.info-section {
		display: flex;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #ebeef5;
	}

	.creator-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #ebeef5;
		.creator-info-left {
			display: flex;
			align-items: center;
			.creator-meta {
				margin-left: 12px;
				display: flex;
				flex-direction: column;
			}
		}
	}

	.content-section {
		padding: 15px;
		font-size: 14px;
		color: #606266;
		line-height: 1.8;
		white-space: pre-line;
	}

	/* 新增动画样式 */
	.animated-item {
		opacity: 0;
		animation: fadeInUp 0.6s ease forwards;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>